<template>
	<tm-fullView>
		<view class="px-30 pt-50 pb-n25">
			<tm-sheet :margin="[0, 0]" :height="192" :padding="[0, 0]">
				<view class="fulled fulled-height">
					<view class="px-30 py-16 flex">
						<view class="flex-col">
							<image src="https://img.js.design/assets/img/616678eb1444897844efc3fa.jpg" class="avatar-big round-5" mode="aspectFill"></image>
						</view>
						<view class="py-20 ml-20 flex-col">
							<view>
								<view class="max-content">
									<text class="text-size-base text-weight-b">王玉云</text>
								</view>
								<view class="max-content relative b-10">
									<text class="text-size-xs text-grey-lighten-1">花椒号：223232232</text>
								</view>
							</view>
							<view class="flex flex-start">
								<view>
									<text class="text-size-xl">4</text>
									<text class="text-size-s pl-4">关注</text>
								</view>
								<view class="px-20">
									<view class="devide"></view>
								</view>
								<view>
									<text class="text-size-xl">2</text>
									<text class="text-size-s pl-4">粉丝</text>
								</view>
							</view>
						</view>
						<view class="flex-end fulled">
							<view class="follow-btn tag-accent round-24 text-align-center">
								<text class="text-size-s">关注</text>
							</view>
						</view>
					</view>
				</view>
			</tm-sheet>
			<view class="my-40">
				<view class="my-5">
					<text class="opacity-0">...</text>
				</view>
				<template v-for="(item, index) in msgList">
					<!-- 好友消息 -->
					<view class="my-50">
						<view class="flex" :class="item.isSelf ? 'flex-end' : ''">
							<view class="flex" :class="item.isSelf ? 'flex-reverse-row' : ''">
								<view class="flex-col mt-10" :class="item.isSelf ? 'ml-20' : 'mr-20'">
									<image :src="item.avatar" class="avatar-small round-20" mode="aspectFill"></image>
								</view>
								<view class="px-40 py-20 grey-lighten-3 flex-col flex-center" :class="item.isSelf ? 'round-20 self-input-bg' : 'round-r-5 round-tl-5'">
									<text class="text-size-base" :class="item.isSelf ? 'text-white' : ''">{{ item.content }}</text>
								</view>
							</view>
						</view>
						<view :class="item.isSelf ? 'text-align-left' : 'text-align-right'">
							<text class="text-size-s">{{ item.time }}</text>
						</view>
					</view>
				</template>
			</view>
			<view id="msgBottom"></view>
		</view>
		<!-- 底部输入区 -->
		<view class="px-30 fixed b-0">
			<view class="bottom-input-body self-input-bg round-24 flex-between flex-center mb-50">
				<view class="ml-50">
					<input class="bottom-input bottom-input-cursor text-white text-size-base" confirm-type="send" v-model="msg" type="text" value="" placeholder="聊点什么吧～" placeholder-class="text-white text-size-base" @confirm="sendMsg" />
				</view>
				<view class="flex-col flex-center mr-50">
					<image src="/static/chat/sound.png" class="bottom-input-right-icon"></image>
				</view>
			</view>
			<view class="safe-height"></view>
		</view>
	</tm-fullView>
</template>

<script>
	export default {
		data() {
			return {
				msgList: [{
					avatar: "https://img.js.design/assets/img/616678eb1444897844efc3fa.jpg",
					content: "你好～",
					time: "19:57",
					isSelf: false // 是否是自己发的消息
				}, {
					avatar: "https://img.js.design/assets/img/616678eb1444897844efc3fa.jpg",
					content: "在忙什么呢？交个朋友呀～～～在忙什么呢？交个朋友呀～～～在忙什么呢？交个朋友呀～～～", // 此处演示聊天框多行内容
					time: "19:57",
					isSelf: false
				}, {
					avatar: "https://img.js.design/assets/smartFill/img331164da748e08.jpg",
					content: "你好你好第一次聊天很高兴认识你～",
					time: "19:57",
					isSelf: true
				}, {
					avatar: "https://img.js.design/assets/img/616678eb1444897844efc3fa.jpg",
					content: "很高兴认识你",
					time: "19:57",
					isSelf: false // 是否是自己发的消息
				}],
				msg: ''
			}
		},
		onReady() {
			// 动态设置标题
			uni.setNavigationBarTitle({
				title: '王玉云'
			})
			uni.setNavigationBarColor({
			    frontColor: '#000000',
			    backgroundColor: '#F7F7F7'
			})
		},
		methods: {
			sendMsg() {
				if (!this.msg) {
					uni.showToast({
						icon: 'error',
						title: '内容不能为空'
					});
					return false;
				}
				var now = uni.$tm.dayjs();
				console.log(now);
				console.log(`发送时间：${now.$H}:${now.$m}`);
				let time = now.$H + ':' + (now.$m < 10 ? `0${now.$m}` : now.$m);
				this.msgList.push({
					avatar: "https://img.js.design/assets/smartFill/img331164da748e08.jpg",
					content: this.msg,
					time: time,
					isSelf: true
				})
				this.msg = '';
				// 页面滚动底部
				this.$nextTick(function(){
					uni.pageScrollTo({
						selector: '#msgBottom',
						duration: 200
					})
				})
			}
		}
	}
</script>

<style>
	
</style>
